import React from 'react';
import style from './style.styl';
import cx from 'classnames';

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { clearAtList, fetchAtList } from '../../actions/home.action'
import * as conversationActions from '../../actions/conversation.action'
import util from '../../util';
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
import {Link} from 'sq-ui';
import ReviewHeader from '../review/new/tool/ReviewHeader';

@connect(({ app,conversation }) => ({ app,conversation }), dispatch => ({actions: bindActionCreators({...conversationActions, clearAtList, fetchAtList}, dispatch)}))
class Conversation extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'Conversation';
  }
  
  render() {
    const tabIndex = ~this.props.location.pathname.indexOf('initiate') ? 0 : 1;
    const {
      roleNameList,
    } = this.props.app.profile;

    return (
      <div>
        <ReviewHeader title={'当面交谈'}/> 
        <div className={style['tab-box']}>
          <div className={cx({
            [style['tab-item']]: true,
            [style['active']]: tabIndex === 0,
          })}>
            <Link to={`/conversation/initiate`}>
              发起交谈
            </Link>
          </div>
          <div className={cx({
            [style['tab-item']]: true,
            [style['active']]: tabIndex === 1,
          })}>
            <Link to={`/conversation/record`}>
              受邀交谈记录
            </Link>
          </div>
        </div>
        <div className={style['tab-area']}>
          {
            React.Children.map(this.props.children, (child, i) => React.cloneElement(child, {
              app: this.props.app,
              conversation: this.props.conversation,
              actions: this.props.actions,
              key: i
            }))
          }
        </div>
      </div>
    );
  }
}

export default Conversation;
